<template>
  <el-dialog
    v-model="visible"
    title="请选择举报原因（必选）"
    width="520px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <!-- 举报原因按钮区域（表格布局） -->
    <table class="reason-table">
      <tr v-for="(row, rowIndex) in buttonRows" :key="rowIndex">
        <td v-for="(item, colIndex) in row" :key="colIndex">
          <el-button
            :type="selectedReason === item ? 'primary' : 'default'"
            class="reason-btn"
            @click="selectedReason = item"
          >
            {{ item }}
          </el-button>
        </td>
      </tr>
    </table>

    <!-- 描述输入区域 -->
    <div class="description-box">
      <div class="desc-label">
        填写举报描述 <span style="color: #999">（选填）</span>
      </div>
      <el-input
        v-model="description"
        type="textarea"
        rows="3"
        placeholder="请补充描述举报原因（如有）"
        resize="none"
      />
    </div>

    <!-- 底部按钮区域 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'

const props = defineProps({
  modelValue: Boolean,
})

const emit = defineEmits(['update:modelValue', 'submit'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
})

const reasons = [
  '发布社区无关内容',
  '发布无意义内容',
  '发布侮辱/引战内容',
  '发布色情低俗内容',
  '发布违规广告内容',
  '发布未证实/谣传内容',
  '发布违法法规/政策内容',
  '发布违反社区规则内容',
  '发布侵权/抄袭内容',
  '发布欺诈内容',
  '发布恶意剧透内容',
  '发布危险/引人不适内容',
  '发布侵犯隐私内容',
  '发布危害未成年人内容',
]

// 将原因两两一组生成二维数组
const buttonRows = computed(() => {
  const rows = []
  for (let i = 0; i < reasons.length; i += 2) {
    rows.push([reasons[i], reasons[i + 1]])
  }
  return rows
})

const selectedReason = ref('')
const description = ref('')

const handleCancel = () => {
  visible.value = false
  selectedReason.value = ''
  description.value = ''
}

const handleConfirm = () => {
  if (!selectedReason.value) {
    ElMessage.warning('请选择举报原因')
    return
  }

  emit('submit', {
    reason: selectedReason.value,
    description: description.value,
  })
  handleCancel()
}
</script>

<style scoped>
.reason-table {
  width: 100%;
  border-spacing: 8px; /* 表格间距 */
  margin-bottom: 16px;
}

.reason-table td {
  width: 50%;
  padding: 0; /* 去除默认 padding */
}

.reason-btn {
  width: 100%;
  white-space: normal;
  font-size: 13px;
  padding: 8px 5px;
  line-height: 1.4;
  min-height: 36px;
  box-sizing: border-box;
}

.description-box {
  margin-bottom: 16px;
}

.desc-label {
  font-size: 13px;
  margin-bottom: 6px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
